<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';

import OperateMethodCodeEditor from './components/OperateMethodCodeEditor.vue';
import OperateMethodProfile from './components/OperateMethodProfile.vue';


import {ElMessage} from "element-plus";
import {RepoCompOperateEntity} from "@/api/cloud/repository/repocomp/script/version/types";
import {getRepoCompOperateEntity} from "@/api/cloud/repository/repocomp/script/version";

const operateMethodProfileRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const operateMethodCodeEditorRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样

const dataState = reactive({
  versionId: '',
  operateId: '',
  entity: {} as RepoCompOperateEntity,
});


/**
 * 刷新页面信息
 */
function handleQuery() {
  getRepoCompOperateEntity(dataState.versionId, dataState.operateId).then(({data}) => {
    operateMethodProfileRef.value.initData(data);
    operateMethodCodeEditorRef.value.initData(data);
  });

}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {

  let param = location.search.split('?')[1];
  let searchParams = new URLSearchParams(param);
  dataState.versionId = searchParams.get('versionId') as string;
  dataState.operateId = searchParams.get('operateId') as string;

  // 向后台查询详细信息
  handleQuery();
});

</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <operate-method-profile ref="operateMethodProfileRef"
    />


    <!-- 数据表单：创建/修改 -->
    <operate-method-code-editor ref="operateMethodCodeEditorRef"
    />

  </div>
</template>
